@import "@catppuccin/palette/css/catppuccin.css";

.shiki {
  font-family: "JetBrains Mono", monospace;
  font-size: 200%;
}

.mocha {
  background-color: var(--ctp-mocha-base);
  color: var(--ctp-mocha-text);
}
.macchiato {
  background-color: var(--ctp-macchiato-base);
  color: var(--ctp-macchiato-text);
}
.frappe {
  background-color: var(--ctp-frappe-base);
  color: var(--ctp-frappe-text);
}
.latte {
  background-color: var(--ctp-latte-base);
  color: var(--ctp-latte-text);
}

html.mocha .shiki,
html.mocha .shiki span {
  background-color: var(--shiki-dark-bg) !important;
  color: var(--shiki-dark) !important;
  font-style: var(--shiki-dark-font-style);
  font-weight: var(--shiki-dark-font-weight);
}
html.macchiato .shiki,
html.macchiato .shiki span {
  background-color: var(--shiki-macchiato-bg) !important;
  color: var(--shiki-macchiato) !important;
  font-style: var(--shiki-macchiato-font-style);
  font-weight: var(--shiki-macchiato-font-weight);
}
html.frappe .shiki,
html.frappe .shiki span {
  background-color: var(--shiki-frappe-bg) !important;
  color: var(--shiki-frappe) !important;
  font-style: var(--shiki-frappe-font-style);
  font-weight: var(--shiki-frappe-font-weight);
}
html.latte .shiki,
html.latte .shiki span {
  font-style: var(--shiki-light-font-style);
  font-weight: var(--shiki-light-font-weight);
}
